



<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#FFF">
  <link rel="apple-touch-icon" sizes="180x180" href="/my-blog/images/apple-touch-icon.png">

<link rel="icon" type="image/ico" sizes="32x32" href="/my-blog/images/favicon.ico">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">


<link rel="alternate" type="application/rss+xml" title="gason" href="https://gason1997.gitee.io/my-blog/rss.xml" />
<link rel="alternate" type="application/atom+xml" title="gason" href="https://gason1997.gitee.io/my-blog/atom.xml" />
<link rel="alternate" type="application/json" title="gason" href="https://gason1997.gitee.io/my-blog/feed.json" />

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="/my-blog/css/app.css?v=0.2.5">

  
  <meta name="keywords" content="grasshopper" />


<link rel="canonical" href="https://gason1997.gitee.io/my-blog/2022/08/27/map_study/leaflet-js/0.%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/">



  <title>
0.Leaflet 快速入门指南 - leaflet教程 - leaflet.js - 地图框架类 |
Sang`s Homepage = gason</title>
<meta name="generator" content="Hexo 6.2.0"></head>
<body itemscope itemtype="http://schema.org/WebPage">
  <div id="loading">
    <div class="cat">
      <div class="body"></div>
      <div class="head">
        <div class="face"></div>
      </div>
      <div class="foot">
        <div class="tummy-end"></div>
        <div class="bottom"></div>
        <div class="legs left"></div>
        <div class="legs right"></div>
      </div>
      <div class="paw">
        <div class="hands left"></div>
        <div class="hands right"></div>
      </div>
    </div>
  </div>
  <div id="container">
    <header id="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="inner">
        <div id="brand">
          <div class="pjax">
          
  <h1 itemprop="name headline">0.Leaflet 快速入门指南
  </h1>
  
<div class="meta">
  <span class="item" title="创建时间：2022-08-27 14:14:09">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <span class="text">发表于</span>
    <time itemprop="dateCreated datePublished" datetime="2022-08-27T14:14:09+08:00">2022-08-27</time>
  </span>
  <span class="item" title="本文字数">
    <span class="icon">
      <i class="ic i-pen"></i>
    </span>
    <span class="text">本文字数</span>
    <span>4.1k</span>
    <span class="text">字</span>
  </span>
  <span class="item" title="阅读时长">
    <span class="icon">
      <i class="ic i-clock"></i>
    </span>
    <span class="text">阅读时长</span>
    <span>4 分钟</span>
  </span>
</div>


          </div>
        </div>
        <nav id="nav">
  <div class="inner">
    <div class="toggle">
      <div class="lines" aria-label="切换导航栏">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
    </div>
    <ul class="menu">
      <li class="item title"><a href="/my-blog/" rel="start">Sang`s Homepage</a></li>
    </ul>
    <ul class="right">
      <li class="item theme">
        <i class="ic i-sun"></i>
      </li>
      <li class="item search">
        <i class="ic i-search"></i>
      </li>
    </ul>
  </div>
</nav>

      </div>
      <div id="imgs" class="pjax">
          <img src="https://s1.ax1x.com/2022/08/27/vRHxTP.png">
      </div>
    </header>
    <div id="waves">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" />
          <use xlink:href="#gentle-wave" x="48" y="3" />
          <use xlink:href="#gentle-wave" x="48" y="5" />
          <use xlink:href="#gentle-wave" x="48" y="7" />
        </g>
      </svg>
    </div>
    <main>
      <div class="inner">
        <div id="main" class="pjax">
          
  <div class="article wrap">
    
<div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<i class="ic i-home"></i>
<span><a href="/my-blog/">首页</a></span><i class="ic i-angle-right"></i>
<span  itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/my-blog/categories/map-study/" itemprop="item" rel="index" title="分类于 地图框架类"><span itemprop="name">地图框架类</span></a>
<meta itemprop="position" content="1" /></span>
<i class="ic i-angle-right"></i>
<span  itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/my-blog/categories/map-study/leaflet-js/" itemprop="item" rel="index" title="分类于 leaflet.js"><span itemprop="name">leaflet.js</span></a>
<meta itemprop="position" content="2" /></span>
<i class="ic i-angle-right"></i>
<span  class="current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/my-blog/categories/map-study/leaflet-js/leaflet%E6%95%99%E7%A8%8B/" itemprop="item" rel="index" title="分类于 leaflet教程"><span itemprop="name">leaflet教程</span></a>
<meta itemprop="position" content="3" /></span>
</div>

    <article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN">
  <link itemprop="mainEntityOfPage" href="https://gason1997.gitee.io/my-blog/2022/08/27/map_study/leaflet-js/0.%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/">

  <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="image" content="/my-blog/images/avatar.jpg">
    <meta itemprop="name" content="小矮人gason">
    <meta itemprop="description" content=", 大丈夫之志应如长江东奔大海">
  </span>

  <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="gason">
  </span>

  <div class="body md" itemprop="articleBody">
    

    <blockquote>
<p>这个循序渐进的入门指南将会帮助你快速了解 Leaflet 基础知识，包括设置 Leaflet 地图、使用标记、折线和弹出窗口，以及处理事件。</p>
</blockquote>
<p><img data-src="https://tva3.sinaimg.cn/large/008uvbSaly8h5lawrrc35j30t90jkgqy.jpg" alt=""></p>
<h1 id="准备一个新的页面"><a class="markdownIt-Anchor" href="#准备一个新的页面">#</a> 准备一个新的页面</h1>
<p>在为地图编写代码之前，你需要在你的页面上完成以下准备步骤：</p>
<ul>
<li>在文档的 head 部分引入 Leaflet CSS 文件:</li>
</ul>
<figure class="highlight html"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span></span></span><br><span class="line"><span class="tag">  <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span></span></span><br><span class="line"><span class="tag">  <span class="attr">href</span>=<span class="string">&quot;https://unpkg.com/leaflet@1.8.0/dist/leaflet.css&quot;</span></span></span><br><span class="line"><span class="tag">  <span class="attr">integrity</span>=<span class="string">&quot;sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==&quot;</span></span></span><br><span class="line"><span class="tag">  <span class="attr">crossorigin</span>=<span class="string">&quot;&quot;</span></span></span><br><span class="line"><span class="tag">/&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>在引入 Leaflet CSS 文件之后引入 Leaflet JavaScript 文件:</li>
</ul>
<figure class="highlight html"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- Make sure you put this AFTER Leaflet&#x27;s CSS --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span></span></span><br><span class="line"><span class="tag">  <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/leaflet@1.8.0/dist/leaflet.js&quot;</span></span></span><br><span class="line"><span class="tag">  <span class="attr">integrity</span>=<span class="string">&quot;sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==&quot;</span></span></span><br><span class="line"><span class="tag">  <span class="attr">crossorigin</span>=<span class="string">&quot;&quot;</span></span></span><br><span class="line"><span class="tag">&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">/&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>将具有特定 id 的 div 元素放置在你希望地图所在的位置:</li>
</ul>
<figure class="highlight html"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;mapid&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>确保地图容器定义了固定高度，例如在 CSS 中设置:</li>
</ul>
<figure class="highlight css"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#mapid</span> &#123;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">180px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>现在您已准备好初始化地图并使用它做一些事情。</p>
</blockquote>
<h1 id="设置地图"><a class="markdownIt-Anchor" href="#设置地图">#</a> 设置地图</h1>
<p><a target="_blank" rel="noopener" href="https://imgse.com/i/vRomxs"><img data-src="https://s1.ax1x.com/2022/08/27/vRomxs.png" alt="vRomxs.png"></a></p>
<p>让我们用漂亮的 Mapbox Streets 瓦片（Tile）底图创建一张伦敦市中心的地图。首先，我们将初始化地图并将其视图设置为我们选择的地理坐标和缩放级别：</p>
<figure class="highlight javascript"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> mymap = L.<span class="title function_">map</span>(<span class="string">&#x27;mapid&#x27;</span>).<span class="title function_">setView</span>([<span class="number">25.042547</span>, <span class="number">102.706312</span>], <span class="number">10</span>);</span><br></pre></td></tr></table></figure>
<blockquote>
<p>默认情况下（因为我们在创建地图实例时没有传递任何选项），地图上的所有鼠标和触摸交互都处于启用状态，并且具有缩放和属性控制。</p>
</blockquote>
<blockquote>
<p>🚩 请注意， <code>setView</code>  调用还会返回地图对象 —— 大多数 Leaflet 方法在不返回显式值时的行为都是这样的，这允许你可以很方便的进行类似 jQuery 的链式调用。<br>
🔥 此处以昆明五华区坐标为例， <code>setView</code>  携带两个参数： <code>[25.042547, 102.706312]</code>  为地图中心坐标位置， <code>10</code>  为地图加载级别（数字越大地图加载越近）</p>
</blockquote>
<p>接下来我们将添加一个瓦片（Tile）图层到地图中，在当前示例中它是一个 Mapbox 街道的瓦片（Tile）图层。创建一个瓦片（Tile）图层通常会涉及为瓦片（Tile）图像设置 URL 模板 、属性文本和图层的最大缩放等级。在这个例子中，我们将使用 mapbox/streets-v11 中的 Mapbox’s Static Tiles API（从 Mapbox 中使用 瓦片（Tile），还必须申请一个访问令牌）。由于此 API 默认返回 512x512 图块（而不是 256x256），因此我们还必须明确指定这一点并将缩放值偏移 -1。</p>
<figure class="highlight javascript"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">L.<span class="title function_">tileLayer</span>(<span class="string">&#x27;https://api.mapbox.com/styles/v1/&#123;id&#125;/tiles/&#123;z&#125;/&#123;x&#125;/&#123;y&#125;?access_token=&#123;accessToken&#125;&#x27;</span>, &#123;</span><br><span class="line">    <span class="attr">attribution</span>: <span class="string">&#x27;Map data &amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors, Imagery © &lt;a href=&quot;https://www.mapbox.com/&quot;&gt;Mapbox&lt;/a&gt;&#x27;</span>,</span><br><span class="line">    <span class="attr">maxZoom</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">id</span>: <span class="string">&#x27;mapbox/streets-v11&#x27;</span>,</span><br><span class="line">    <span class="attr">tileSize</span>: <span class="number">512</span>,</span><br><span class="line">    <span class="attr">zoomOffset</span>: -<span class="number">1</span>,</span><br><span class="line">    <span class="attr">accessToken</span>: <span class="string">&#x27;your.mapbox.access.token&#x27;</span></span><br><span class="line">&#125;).<span class="title function_">addTo</span>(mymap);</span><br></pre></td></tr></table></figure>
<p>确保引入 leaflet.js 文件并配置好 div 后运行所有代码。就是这样，你现在拥有一个运行正常的 Leaflet 地图。</p>
<blockquote>
<p>L.tileLayer(‘mapUrl’,{attribution,maxZoom,id,tileSize,zoomOffset,accessToken})<br>
 <code>attribution</code>  设置版权<br>
 <code>maxZoom</code>  最大缩放比例<br>
 <code>accessToken</code> （地图令牌 /token）注册 mapbox token 地址： <code>https://docs.mapbox.com/help/glossary/access-token/</code></p>
</blockquote>
<h1 id="标记-圆和多边形"><a class="markdownIt-Anchor" href="#标记-圆和多边形">#</a> 标记、圆和多边形</h1>
<p>除了瓦片（Tile）图层，您还可以轻松地向地图添加其他内容，包括标记、折线、多边形、圆形和弹出窗口。</p>
<p>1. 让我们添加一个标记：</p>
<figure class="highlight javascript"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> marker = L.<span class="title function_">marker</span>([<span class="number">25.042547</span>, <span class="number">102.706312</span>]).<span class="title function_">addTo</span>(mymap);</span><br></pre></td></tr></table></figure>
<p><a target="_blank" rel="noopener" href="https://imgse.com/i/vRo7WQ"><img data-src="https://s1.ax1x.com/2022/08/27/vRo7WQ.png" alt="vRo7WQ.png"></a></p>
<p>2. 可以使用同样的方式添加一个圆（除了指定以米为单位的半径作为第二个参数），但允许您通过在创建对象时将选项作为最后一个参数传递来控制它的外观：</p>
<figure class="highlight javascript"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> circle = L.<span class="title function_">circle</span>([<span class="number">25.042547</span>, <span class="number">102.706312</span>], &#123;</span><br><span class="line">    <span class="attr">color</span>: <span class="string">&#x27;red&#x27;</span>,</span><br><span class="line">    <span class="attr">fillColor</span>: <span class="string">&#x27;#f03&#x27;</span>,</span><br><span class="line">    <span class="attr">fillOpacity</span>: <span class="number">0.5</span>,</span><br><span class="line">    <span class="attr">radius</span>: <span class="number">500</span></span><br><span class="line">&#125;).<span class="title function_">addTo</span>(mymap);</span><br></pre></td></tr></table></figure>
<p><a target="_blank" rel="noopener" href="https://imgse.com/i/vRTG0P"><img data-src="https://s1.ax1x.com/2022/08/27/vRTG0P.png" alt="vRTG0P.png"></a></p>
<blockquote>
<p>circle ([圆中心坐标位置]，{color，fillColor,fillOpacity,radius})<br>
 <code>color</code> : 圆边框颜色<br>
 <code>fillColor</code> : 圆形填充颜色<br>
 <code>fillOpacity</code> : 填充颜色透明度<br>
 <code>radius</code> ：圆形半径</p>
</blockquote>
<p>3. 添加多边形同样简单：</p>
<figure class="highlight javascript"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> polygon = L.<span class="title function_">polygon</span>([</span><br><span class="line">      [<span class="number">25.001547</span>, <span class="number">102.706312</span>],</span><br><span class="line">      [<span class="number">25.042547</span>, <span class="number">102.656312</span>],</span><br><span class="line">      [<span class="number">25.062547</span>, <span class="number">102.786312</span>],</span><br><span class="line">    ]).<span class="title function_">addTo</span>(mymap);</span><br></pre></td></tr></table></figure>
<p><a target="_blank" rel="noopener" href="https://imgse.com/i/vRTO9e"><img data-src="https://s1.ax1x.com/2022/08/27/vRTO9e.png" alt="vRTO9e.png"></a></p>
<blockquote>
<p>L.polygon([x1.y1],[x2,y2],[x3,y3])</p>
</blockquote>
<h1 id="使用弹出窗口"><a class="markdownIt-Anchor" href="#使用弹出窗口">#</a> 使用弹出窗口</h1>
<p>1. 当您想将某些信息附加到地图上的特定对象时，通常会使用弹出窗口。Leaflet 有一个非常方便的快捷方式：</p>
<figure class="highlight javascript"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">marker.<span class="title function_">bindPopup</span>(<span class="string">&#x27;我是marker坐标的popup弹窗&#x27;</span>).<span class="title function_">openPopup</span>();</span><br><span class="line">circle.<span class="title function_">bindPopup</span>(<span class="string">&#x27;我是circle的popup弹窗&#x27;</span>);</span><br><span class="line">polygon.<span class="title function_">bindPopup</span>(<span class="string">&#x27;我是polygon的popup弹窗&#x27;</span>);</span><br></pre></td></tr></table></figure>
<p><a target="_blank" rel="noopener" href="https://imgse.com/i/vR7rgH"><img data-src="https://s1.ax1x.com/2022/08/27/vR7rgH.png" alt="vR7rgH.png"></a></p>
<p>尝试点击我们的对象。该 bindPopup 方法将带有指定 HTML 内容的弹出窗口附加到您的标记，以便在您单击对象时显示弹出窗口，并且该 openPopup 方法（仅适用于标记）立即打开附加的弹出窗口。</p>
<p>2. 您还可以将弹出窗口用作图层（当您需要的不仅仅是将弹出窗口附加到对象时）：</p>
<figure class="highlight javascript"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> popup = L.<span class="title function_">popup</span>()</span><br><span class="line">     .<span class="title function_">setLatLng</span>([<span class="number">25.062547</span>, <span class="number">102.726312</span>])</span><br><span class="line">     .<span class="title function_">setContent</span>(<span class="string">&#x27;I am a standalone popup.&#x27;</span>)</span><br><span class="line">     .<span class="title function_">openOn</span>(mymap);</span><br></pre></td></tr></table></figure>
<p><a target="_blank" rel="noopener" href="https://imgse.com/i/vR7gbt"><img data-src="https://s1.ax1x.com/2022/08/27/vR7gbt.png" alt="vR7gbt.png"></a></p>
<blockquote>
<p>🚩 这里我们使用 openOn 而不是 addTo 因为它在打开一个新窗口时，先前打开的弹出窗口会自动关闭。</p>
</blockquote>
<h1 id="处理事件"><a class="markdownIt-Anchor" href="#处理事件">#</a> 处理事件</h1>
<p>每次在 Leaflet 中触发某些事件时，例如用户单击标记或地图缩放更改，相应的对象都会发送一个事件，您可以使用函数订阅该事件。它允许您对用户交互做出反应：</p>
<figure class="highlight javascript"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">onMapClick</span>(<span class="params">e</span>) &#123;</span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">&quot;You clicked the map at &quot;</span> + e.<span class="property">latlng</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">mymap.<span class="title function_">on</span>(<span class="string">&#x27;click&#x27;</span>, onMapClick);</span><br></pre></td></tr></table></figure>
<p><a target="_blank" rel="noopener" href="https://imgse.com/i/vRHcz4"><img data-src="https://s1.ax1x.com/2022/08/27/vRHcz4.png" alt="vRHcz4.png"></a></p>
<p>每个对象都有属于自己的一组事件 —— 详情请参阅文档。监听器、函数的第一个参数是一个事件对象 —— 它包含关于发生的事件的有用信息。例如，地图点击事件对象（在上面的例子中的 e）有一个 latlng 属性，它是点击发生的位置。</p>
<p>🚩 让我们通过使用 popup 而不是 alert 来改进我们的示例：</p>
<figure class="highlight javascript"><figcaption><span>scanner</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> popup = L.<span class="title function_">popup</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">onMapClick</span>(<span class="params">e</span>) &#123;</span><br><span class="line">    popup</span><br><span class="line">        .<span class="title function_">setLatLng</span>(e.<span class="property">latlng</span>)</span><br><span class="line">        .<span class="title function_">setContent</span>(<span class="string">&quot;You clicked the map at &quot;</span> + e.<span class="property">latlng</span>.<span class="title function_">toString</span>())</span><br><span class="line">        .<span class="title function_">openOn</span>(mymap);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">mymap.<span class="title function_">on</span>(<span class="string">&#x27;click&#x27;</span>, onMapClick);</span><br></pre></td></tr></table></figure>
<p><a target="_blank" rel="noopener" href="https://imgse.com/i/vRH5o6"><img data-src="https://s1.ax1x.com/2022/08/27/vRH5o6.png" alt="vRH5o6.png"></a></p>
<blockquote>
<p>现在您已经学习了 Leaflet 的基础知识，可以立即开始构建地图应用程序了！</p>
</blockquote>

      <div class="tags">
          <a href="/my-blog/tags/grasshopper/" rel="tag"><i class="ic i-tag"></i> grasshopper</a>
      </div>
  </div>

   <footer>

    <div class="meta">
  <span class="item">
    <span class="icon">
      <i class="ic i-calendar-check"></i>
    </span>
    <span class="text">更新于</span>
    <time title="修改时间：2022-08-27 17:46:56" itemprop="dateModified" datetime="2022-08-27T17:46:56+08:00">2022-08-27</time>
  </span>
</div>

      
<div class="reward">
  <button><i class="ic i-heartbeat"></i> 赞赏</button>
  <p>我移除了点赞打赏功能....别点了</p>
  <div id="qr">
  </div>
</div>

      

<div id="copyright">
<ul>
  <li class="author">
    <strong>本文作者： </strong>小矮人gason <i class="ic i-at"><em>@</em></i>gason
  </li>
  <li class="link">
    <strong>本文链接：</strong>
    <a href="https://gason1997.gitee.io/my-blog/2022/08/27/map_study/leaflet-js/0.%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/" title="0.Leaflet 快速入门指南">https://gason1997.gitee.io/my-blog/2022/08/27/map_study/leaflet-js/0.快速入门/</a>
  </li>
  <li class="license">
    <strong>版权声明： </strong>本站所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-SA</span> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

  </footer>

</article>

  </div>
  

<div class="post-nav">
    <div class="item left">
      

  <a href="/my-blog/2022/08/21/map-study/leaflet-js/0.%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/" itemprop="url" rel="prev" data-background-image="https:&#x2F;&#x2F;s1.ax1x.com&#x2F;2022&#x2F;08&#x2F;17&#x2F;vDuYGR.png" title="0.快速入门">
  <span class="type">上一篇</span>
  <span class="category"><i class="ic i-flag"></i> leaflet初级</span>
  <h3>0.快速入门</h3>
  </a>

    </div>
    <div class="item right">
    </div>
</div>

  
  <div class="wrap" id="comments"></div>


        </div>
        <div id="sidebar">
          

<div class="inner">

  <div class="panels">
    <div class="inner">
      <div class="contents panel pjax" data-title="文章目录">
          <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%87%86%E5%A4%87%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84%E9%A1%B5%E9%9D%A2"><span class="toc-number">1.</span> <span class="toc-text"> 准备一个新的页面</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E5%9C%B0%E5%9B%BE"><span class="toc-number">2.</span> <span class="toc-text"> 设置地图</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%A0%87%E8%AE%B0-%E5%9C%86%E5%92%8C%E5%A4%9A%E8%BE%B9%E5%BD%A2"><span class="toc-number">3.</span> <span class="toc-text"> 标记、圆和多边形</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E5%BC%B9%E5%87%BA%E7%AA%97%E5%8F%A3"><span class="toc-number">4.</span> <span class="toc-text"> 使用弹出窗口</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%A4%84%E7%90%86%E4%BA%8B%E4%BB%B6"><span class="toc-number">5.</span> <span class="toc-text"> 处理事件</span></a></li></ol>
      </div>
      <div class="related panel pjax" data-title="系列文章">
        <ul>
          <li class="active"><a href="/my-blog/2022/08/27/map_study/leaflet-js/0.%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/" rel="bookmark" title="0.Leaflet 快速入门指南">0.Leaflet 快速入门指南</a></li>
        </ul>
      </div>
      <div class="overview panel" data-title="站点概览">
        <div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <img class="image" itemprop="image" alt="小矮人gason"
      data-src="/my-blog/images/avatar.jpg">
  <p class="name" itemprop="name">小矮人gason</p>
  <div class="description" itemprop="description">大丈夫之志应如长江东奔大海</div>
</div>

<nav class="state">
    <div class="item posts">
      <a href="/my-blog/archives/">
        <span class="count">25</span>
        <span class="name">文章</span>
      </a>
    </div>
    <div class="item categories">
      <a href="/my-blog/categories/">
        <span class="count">29</span>
        <span class="name">分类</span>
      </a>
    </div>
    <div class="item tags">
      <a href="/my-blog/tags/">
        <span class="count">9</span>
        <span class="name">标签</span>
      </a>
    </div>
</nav>

<div class="social">
      <span class="exturl item github" data-url="aHR0cHM6Ly9naXRodWIuY29tL3lvdXJuYW1l" title="https:&#x2F;&#x2F;github.com&#x2F;yourname"><i class="ic i-github"></i></span>
      <span class="exturl item twitter" data-url="aHR0cHM6Ly90d2l0dGVyLmNvbS95b3VybmFtZQ==" title="https:&#x2F;&#x2F;twitter.com&#x2F;yourname"><i class="ic i-twitter"></i></span>
      <span class="exturl item zhihu" data-url="aHR0cHM6Ly93d3cuemhpaHUuY29tL3Blb3BsZS94aWFvLWFpLXJlbi01NS01Ng==" title="https:&#x2F;&#x2F;www.zhihu.com&#x2F;people&#x2F;xiao-ai-ren-55-56"><i class="ic i-zhihu"></i></span>
      <span class="exturl item music" data-url="aHR0cHM6Ly9tdXNpYy4xNjMuY29tLyMvdXNlci9ob21lP2lkPTI4ODYzNzQ4MA==" title="https:&#x2F;&#x2F;music.163.com&#x2F;#&#x2F;user&#x2F;home?id&#x3D;288637480"><i class="ic i-cloud-music"></i></span>
      <span class="exturl item weibo" data-url="aHR0cHM6Ly93ZWliby5jb20vdS8yODAzMzAxNzAx" title="https:&#x2F;&#x2F;weibo.com&#x2F;u&#x2F;2803301701"><i class="ic i-weibo"></i></span>
      <span class="exturl item about" data-url="aHR0cHM6Ly9icm9hZGxlYWYtbWFpemUtMzM1Lm5vdGlvbi5zaXRlL1Nhbmctcy1Ib21lcGFnZS00MzZhMGI4ZGExMjI0ODcwOWVkNGEzM2JkNzYyNDcwNA==" title="https:&#x2F;&#x2F;broadleaf-maize-335.notion.site&#x2F;Sang-s-Homepage-436a0b8da12248709ed4a33bd7624704"><i class="ic i-address-card"></i></span>
</div>

<ul class="menu">
  
    
  <li class="item">
    <a href="/my-blog/" rel="section"><i class="ic i-home"></i>首页</a>
  </li>

        
  <li class="item dropdown">
      <a href="javascript:void(0);"><i class="ic i-feather"></i>文章</a>
    <ul class="submenu">

        
  <li class="item">
    <a href="/my-blog/archives/" rel="section"><i class="ic i-list-alt"></i>归纳</a>
  </li>

        
  <li class="item">
    <a href="/my-blog/categories/" rel="section"><i class="ic i-th"></i>分类</a>
  </li>

        
  <li class="item">
    <a href="/my-blog/tags/" rel="section"><i class="ic i-tags"></i>标签</a>
  </li>

  </ul>
    
  <li class="item">
    <a href="/my-blog/about/" rel="section"><i class="ic i-user"></i>关于</a>
  </li>

    
  <li class="item">
    <a href="/my-blog/links/" rel="section"><i class="ic i-magic"></i>相关链接</a>
  </li>


</ul>

      </div>
    </div>
  </div>

  <ul id="quick">
    <li class="prev pjax">
    </li>
    <li class="up"><i class="ic i-arrow-up"></i></li>
    <li class="down"><i class="ic i-arrow-down"></i></li>
    <li class="next pjax">
    </li>
    <li class="percent"></li>
  </ul>
</div>


        </div>
        <div class="dimmer"></div>
      </div>
    </main>
    <footer id="footer">
      <div class="inner">
        <div class="widgets">
          
<div class="rpost pjax">
  <h2>随机文章</h2>
  <ul>
      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/arc-study/" title="分类于 建筑学习类">建筑学习类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/rhino-GH/" title="分类于 Rhino与grasshopper">Rhino与grasshopper</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/rhino-GH/grasshopper%E5%85%A5%E9%97%A8/" title="分类于 grasshopper入门">grasshopper入门</a>
</div>

    <span><a href="/my-blog/2022/08/17/arc-study/rhino-GH/GH/4.%E5%88%9D%E8%AF%86Grasshopper%E7%95%8C%E9%9D%A2/" title="4.初识Grasshopper界面">4.初识Grasshopper界面</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/web-study/" title="分类于 前端基础类">前端基础类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/web-study/js-study/" title="分类于 Javascript">Javascript</a>
</div>

    <span><a href="/my-blog/2022/03/03/web-study/js-study/JavaScript/" title="JavaScript入门">JavaScript入门</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/deploy-study/" title="分类于 运维部署类">运维部署类</a>
</div>

    <span><a href="/my-blog/2022/07/30/deploy_study/tomcat+nginx%E9%83%A8%E7%BD%B2%EF%BC%88windows%EF%BC%89/" title="tomcat+nginx 部署（windows）">tomcat+nginx 部署（windows）</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/management/" title="分类于 综合学习类">综合学习类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/management/%E8%8B%B1%E8%AF%AD%E4%BA%8C/" title="分类于 英语二">英语二</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/management/%E8%8B%B1%E8%AF%AD%E4%BA%8C/%E9%98%85%E8%AF%BB%E7%90%86%E8%A7%A3/" title="分类于 阅读理解">阅读理解</a>
</div>

    <span><a href="/my-blog/2022/08/15/management/English2/readingComprehension/%E9%98%85%E8%AF%BB%E7%90%86%E8%A7%A31/" title="阅读理解1">阅读理解1</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/map-study/" title="分类于 地图框架类">地图框架类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/map-study/leaflet-js/" title="分类于 leaflet.js">leaflet.js</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/map-study/leaflet-js/leaflet%E6%95%99%E7%A8%8B/" title="分类于 leaflet教程">leaflet教程</a>
</div>

    <span><a href="/my-blog/2022/08/27/map_study/leaflet-js/0.%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/" title="0.Leaflet 快速入门指南">0.Leaflet 快速入门指南</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/arc-study/" title="分类于 建筑学习类">建筑学习类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/revit-dynamo/" title="分类于 Revit与Dynamo">Revit与Dynamo</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/revit-dynamo/Dynamo/" title="分类于 Dynamo">Dynamo</a>
</div>

    <span><a href="/my-blog/2022/08/15/arc-study/revit-dynamo/dynamo%E4%B8%8B%E8%BD%BD%E4%B8%8E%E5%AE%89%E8%A3%85/" title="Dynamo下载与安装">Dynamo下载与安装</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/management/" title="分类于 综合学习类">综合学习类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/management/%E8%8B%B1%E8%AF%AD%E4%BA%8C/" title="分类于 英语二">英语二</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/management/%E8%8B%B1%E8%AF%AD%E4%BA%8C/%E5%AE%8C%E5%BD%A2%E5%A1%AB%E7%A9%BA/" title="分类于 完形填空">完形填空</a>
</div>

    <span><a href="/my-blog/2022/08/15/management/English2/Cloze/%E5%AE%8C%E5%BD%A2%E5%A1%AB%E7%A9%BA1/" title="完形填空1">完形填空1</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/management/" title="分类于 综合学习类">综合学习类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/management/GLZH/" title="分类于 管理综合">管理综合</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/management/GLZH/%E5%86%99%E4%BD%9C/" title="分类于 写作">写作</a>
</div>

    <span><a href="/my-blog/2022/08/15/management/GLZH/writing/%E5%86%99%E4%BD%9C2/" title="写作2">写作2</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/arc-study/" title="分类于 建筑学习类">建筑学习类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/rhino-GH/" title="分类于 Rhino与grasshopper">Rhino与grasshopper</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/arc-study/rhino-GH/grasshopper%E5%85%A5%E9%97%A8/" title="分类于 grasshopper入门">grasshopper入门</a>
</div>

    <span><a href="/my-blog/2022/08/16/arc-study/rhino-GH/GH/1.grasshopper%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F/" title="1.grasshopper是什么？">1.grasshopper是什么？</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/my-blog/categories/management/" title="分类于 综合学习类">综合学习类</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/management/GLZH/" title="分类于 管理综合">管理综合</a>
<i class="ic i-angle-right"></i>
<a href="/my-blog/categories/management/GLZH/%E9%80%BB%E8%BE%91%E6%8E%A8%E7%90%86/" title="分类于 逻辑推理">逻辑推理</a>
</div>

    <span><a href="/my-blog/2022/08/15/management/GLZH/reasoning/%E9%80%BB%E8%BE%91%E6%8E%A8%E7%90%861/" title="逻辑推理1">逻辑推理1</a></span>
  </li>

  </ul>
</div>
<div>
  <h2>最新评论</h2>
  <ul class="leancloud-recent-comment"></ul>
</div>

        </div>
        <div class="status">
  <div class="copyright">
    
    &copy; 
    <span itemprop="copyrightYear">2022</span>
    <span class="with-love">
      <i class="ic i-sakura rotate"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">小矮人gason @ Sang`s Homepage</span>
  </div>
  <div class="count">
    <span class="post-meta-item-icon">
      <i class="ic i-chart-area"></i>
    </span>
    <span title="站点总字数">92k 字</span>

    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="ic i-coffee"></i>
    </span>
    <span title="站点阅读时长">1:24</span>
  </div>
  <div class="powered-by">
    基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> the Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span>
  </div>
</div>

      </div>
    </footer>
  </div>
<script data-config type="text/javascript">
  var LOCAL = {
    path: '2022/08/27/map_study/leaflet-js/0.快速入门/',
    favicon: {
      show: "点开格桑的网页了....",
      hide: "离开格桑的网页了...."
    },
    search : {
      placeholder: "文章搜索",
      empty: "关于 「 ${query} 」，什么也没搜到",
      stats: "${time} ms 内找到 ${hits} 条结果"
    },
    valine: true,fancybox: true,
    copyright: '复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',
    ignores : [
      function(uri) {
        return uri.includes('#');
      },
      function(uri) {
        return new RegExp(LOCAL.path+"$").test(uri);
      }
    ]
  };
</script>

<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>

<script src="//cdn.jsdelivr.net/combine/npm/pace-js@1.0.2/pace.min.js,npm/pjax@0.2.8/pjax.min.js,npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js,npm/animejs@3.2.0/lib/anime.min.js,npm/algoliasearch@4/dist/algoliasearch-lite.umd.js,npm/instantsearch.js@4/dist/instantsearch.production.min.js,npm/lozad@1/dist/lozad.min.js,npm/quicklink@2/dist/quicklink.umd.js"></script>

<script src="/my-blog/js/app.js?v=0.2.5"></script>




</body>
</html>
